Unmount

To remove the chart from your host application and clean up resources, call the destroy() method.

export const chartDestroy = (chart: Chart) => {
    chart.destroy();
}

Example

#

import { generateCandles } from '@dx-private/dxchart5-react/dist/utils/generator/candle-generator.utils';
import { Chart } from '@devexperts/dxcharts-lite/dist';
import React, { useCallback, useRef } from 'react';
import { FlexContainer } from '../../../src/components/FlexContainer';
const setCandles = (ci: Chart) => {
    const generatedCandles = generateCandles();
    ci.setData({
        candles: generatedCandles,
    });
};
export const ChartUnmountComponent = () => {
    const localChart = useRef<Chart>();
    const containerRef = useRef<HTMLDivElement>(null);
    const mountChart = useCallback(() => {
        if (containerRef.current) {
            const chart = new Chart(containerRef.current, {
                fixedSize: {
                    height: 440,
                    width: 790,
                },
            });
            setCandles(chart);
            localChart.current = chart;
        }
    }, []);
    const unmountChart = useCallback(() => {
        if (localChart.current) {
            localChart.current.destroy();
            localChart.current = undefined;
        }
    }, []);
    return (
        <>
            <FlexContainer>
                <button onClick={mountChart}>Mount Chart</button>
                <button onClick={unmountChart}>Unmount Chart</button>
            </FlexContainer>
            <FlexContainer>
                <div ref={containerRef} />
            </FlexContainer>
        </>
    );
};